<template>
  <div class="find">
    <!--    头部搜索区域-->
    <!--    v-if="this.$route.meta.findShow"-->
    <router-view></router-view>
    <div v-if="this.$route.meta.findShow">
      <Header v-if="$route.meta.showHeader"
        ><form action="/" class="headerIcon">
          <van-search
            v-model="value"
            show-action
            left="123"
            @focus="onFocus"
            placeholder="请输入搜索关键词"
            @search="onSearch"
            @cancel="onCancel"
          /></form
      ></Header>
      <!--    轮播区域-->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item
          v-for="(item, index) in bannerList"
          :key="index"
          @click="handlerBn(item.bannerId)"
        >
          <img :src="item.pic" alt="" />
        </van-swipe-item>
      </van-swipe>
      <!--    轮播区域结束-->
      <!--    tab栏滚动区域-->
      <van-tabs color="rgba(255, 0, 0, 0)" class="tab_bottom">
        <van-tab v-for="(item, index) in tabList" :key="index" swipeable>
          <template #title to="item.path">
            <van-icon :name="item.icon" /> {{ item.title }}
          </template>
        </van-tab>
      </van-tabs>
      <!--    推荐歌单-->
      <div class="tabs">
        <h3>
          <span>推荐歌单</span>
          <span>更多&gt;</span>
        </h3>
        <div class="conTab">
          <div class="vantTabs">
            <ul>
              <li
                v-for="item in allRecommendList"
                :key="item.id"
                @click="handlerRmd(item.id)"
              >
                <img :src="item.picUrl" alt="" />
                <p>{{ item.name }}</p>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!--      刷新歌曲tab区域-->
      <div class="tabs">
        <h3>
          <span>云村村民16...的雷达歌曲</span>
          <span @click="More">更多&gt;</span>
        </h3>
        <div class="conTab">
          <div class="vantTabs">
            <ul>
              <li v-for="item in dailySongs" :key="item.al.id">
                <img :src="item.al.picUrl" alt="" />
                <p>{{ item.al.name }}</p>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!--      歌手分类列表-->
      <div class="tabs classify">
        <h3>
          <span>专属场景歌单</span>
          <span @click="Artial">更多&gt;</span>
        </h3>
        <div class="conTab">
          <div class="vantTabs">
            <ul>
              <li
                v-for="item in artiList"
                :key="item.id"
                @click="artistSong(item.id)"
              >
                <img :src="item.img1v1Url" alt="" />
                <p>{{ item.name }}</p>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!--      底部播放区域-->
      <div class="ifRame">
        <iframe
          ref="playauto"
          frameborder="no"
          border="0"
          width="100%"
          height="86"
          :src="
            '//music.163.com/outchain/player?type=2&auto=0&height=66&id=' +
            this.$store.state.songID.songid
          "
        ></iframe>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getBanner,
  getRecommend,
  getRecommendSongs,
  getArtistList,
} from "../../api/find";

import Header from "../../components/Header";
export default {
  name: "Find",
  components: { Header },
  data() {
    return {
      bannerList: [],
      tabList: [
        { title: "每日推荐", icon: "more-o", path: "/daily" },
        { title: "私人FM", icon: "play-circle-o", path: "daily" },
        { title: "歌单", icon: "music-o", path: "daily" },
        { title: "排行榜", icon: "more-o", path: "daily" },
        { title: "直播", icon: "play-circle-o", path: "daily" },
        { title: "数字专辑", icon: "more-o", path: "daily" },
        { title: "专注冥想", icon: "more-o", path: "daily" },
        { title: "歌房", icon: "more-o", path: "daily" },
        { title: "游戏专区", icon: "more-o", path: "daily" },
      ],
      value: "",
      allRecommendList: [],
      dailySongs: [],
      artiList: [],
    };
  },
  created() {
    this.handlerBanner();
    this.handlerRecommend();
    // this.handlerHomePage();
    // this.handlerRelated();
    this.handlerSongs();
    this.handlerArtist();
  },
  methods: {
    activated() {
      if (this.$route.meta.isUseCache) {
        this.bannerList = [];
        this.allRecommendList = [];
        this.dailySongs = [];
        this.artiList = [];
        this.onLoad();
      }
      this.$route.meta.isUseCache = false;
    },
    deactivated() {
      console.log("likaile");
    },
    async handlerBanner() {
      const res = await getBanner({ type: 3 });
      // console.log(res);
      // console.log(res.data.banners);
      this.bannerList = res.data.banners;
    },
    goToUrl(url) {
      this.$router.push(url);
      // console.log(url);
      // console.log("123");
    },
    onFocus() {
      this.$router.push("/search");
    },
    onSearch() {
      // TODO search
    },
    onCancel() {
      this.$router.go(-1);
    },
    async handlerRecommend() {
      const cookie = localStorage.getItem("cookie");
      const res = await getRecommend(cookie);
      // console.log(res);
      this.allRecommendList = res.data.recommend;
      // console.log(this.allRecommendList);
    },
    // 到底了、上啦换一批新内容部分
    // async handlerHomePage() {
    //   let params = {
    //     refresh: true,
    //   };
    //   const res = await getHomePage(params);
    //   console.log(res);
    // },
    // 相关歌单推荐
    // async handlerRelated() {
    //   const cookie = localStorage.getItem("cookie");
    //   const res = await getRelated(cookie)
    //   console.log(res)
    // }
    // 每日推荐歌曲
    async handlerSongs() {
      const res = await getRecommendSongs();
      // console.log(res);
      this.dailySongs = res.data.data.dailySongs;
      // console.log(this.dailySongs);
    },
    // 相关歌单更多more
    More() {
      // console.log("123");
      this.$router.push("/find/more");
      // console.log(11111);
    },
    handlerBn(id) {
      alert(id);
    },
    handlerRmd(id) {
      alert(id);
    },
    async handlerArtist() {
      let params = {
        type: -1,
        area: -1,
      };
      const res = await getArtistList(params);
      // console.log(res);
      if (res.status !== 200) this.$message.error("获取信息失败!");
      this.artiList = res.data.artists;
      // console.log(this.artiList);
    },
    Artial() {},
    artistSong(id) {
      // alert(id)
      this.$router.push("/find/daily?id=" + id);
    },
    beforeRouteLeave(to, from, next) {
      if (to.name === "Daily") {
        from.meta.isUseCache = true;
      }
      next();
    },
  },
};
</script>

<style scoped>
.classify {
  padding-bottom: 2.6rem;
}
.ifRame {
  width: 100%;
  height: 0.6rem;
  background-color: #fff;
}
iframe {
  position: fixed;
  bottom: 0.67rem;
  left: 0;
}
.find {
  padding-bottom: 0.6rem;
}
.conTab {
  height: 2.65rem;
  overflow-x: scroll;
  overflow-y: hidden;
  margin-bottom: 10px;
}
.conTab .vantTabs {
  width: 3rem;
  height: 2.6rem;
}
.conTab .vantTabs ul {
  width: 20rem;
  /*display: flex;*/
}
.conTab .vantTabs ul li:first-child {
  margin-left: 0.2rem;
}
.conTab .vantTabs ul li {
  height: 2.6rem;
  width: 2rem;
  margin: 0.03rem 0.08rem;
  float: left;
}
.conTab .vantTabs ul li img {
  width: 100%;
  height: 2rem;
  border-radius: 0.2rem;
}
.conTab .vantTabs ul li p {
  height: 0.45rem;
  font-weight: 400;
  font-size: 0.14rem;
  display: -webkit-box;
  display: -moz-box;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /*显示行数*/
}
.tabs {
  height: 2.8rem;
  margin-bottom: 0.63rem;
}
.tabs h3 {
  height: 0.4rem;
  line-height: 0.4rem;
  font-weight: 400;
  font-size: 0.2rem;
  padding: 0.2rem;
}
.tabs h3 span:last-child {
  float: right;
  display: block;
  text-align: center;
  width: 1.1rem;
  height: 0.4rem;
  line-height: 0.4rem;
  border: 1px solid #c8c8c8;
  border-radius: 0.2rem;
}
.tabs h3 span:first-child {
  font-weight: 700;
  font-size: 0.35rem;
}
.contentBox {
  width: 2rem;
  /*height: 2.6rem;*/
}
.van-tabs--line .van-tabs__wrap {
  height: 0;
}
van-tabs van-tabs--line {
  height: 1rem;
}
.van-tab__text {
  text-align: center;
}
.my-swipe {
  padding: 0 5%;
}
.my-swipe img {
  height: 2.6rem;
  width: 90%;
  border-radius: 0.2rem;
}
.van-icon {
  display: block;
  text-align: center;
}
.van-tab {
  border-right: 1px solid #edeff3;
  padding: 0 0.1rem;
  text-align: center;
}
.tab_bottom {
  padding: 0.16rem 0;
  border-bottom: 1px solid #e9ebec;
}
.headerIcon {
  width: 95%;
}
.tabs img {
  width: 100%;
  /*height: 2rem;*/
}
.tabs p {
  width: 2rem;
  height: 0.3rem;
}
</style>
